<template>
  <ul class="card-wrap">
    <li class="card-item" v-for="navItem in navList" :key="navItem.id">
      <router-link class="card" :to="navItem.to">
        <div class="left-wrap">
          <i class="ico" :class="navItem.icon"></i>
          <span class="black-text">{{ navItem.name }}</span>
        </div>
        <div class="right-wrap">
          <i class="icon-arrow-right"></i>
        </div>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'CardList',
  props: ['navList'],
  mounted () {
  }
}
</script>
<style lang="stylus" scoped>
@import '../../assets/common/stylus/mixins.styl'
.card-wrap
  margin-top 10px
  display flex
  justify-content space-between
  align-items center
  flex-direction column
  background-color #fff
  .card-item
    width 100%
    bottom-border-1px(#aaa)
    color #333
    padding 10px
    .card
      padding 10px
      display flex
      justify-content space-between
      .left-wrap
        .black-text
          color #333
        .ico
          font-size 24px
          color #333
      .right-wrap
        color #aaa
        font-size 24px
</style>
